import React, { useState } from 'react'
import NavBar from '../../../components/Navbar'
import './index.less'
import { useEffect } from 'react'
import { getValentinRecordList } from '../../../api/active'
import { compareVersions, getVersion } from '../../../utils/util'
import appSdk from '../../../utils/app_sdk'
import { InfiniteScroll } from 'antd-mobile'

// {
//     "id": 4,
//     "goods_id": 215,
//     "user_id": 1182427,
//     "type": 2,
//     "goods_name": "幻境喵",
//     "debris_num": 1,
//     "create_time": 1691759908
// }
export default function ValentineRecord() {
  const [dataList, setDataList] = useState([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  useEffect(() => {
    if (compareVersions(getVersion() || '1.0.0', '2.2.0') !== -1) {
      appSdk('setFullScreen', 1)
    }
  }, [])

  const getList = () => {
    return getValentinRecordList({
      page: page
    })
      .then((res) => {
        if (res.data && res.data?.length) {
          setDataList(dataList.concat(res.data))
        }
        if (res.data && res.data?.length >= 10) {
          setPage(page + 1)
          setHasMore(true)
        } else {
          setHasMore(false)
        }
      })
      .catch((e) => {
        console.log(e)
        // setData([])
        setHasMore(false)
      })
  }

  function TimeDate(now) {
    var year = now.getFullYear()
    var month = now.getMonth() + 1
    var date = now.getDate()
    // var hour=now.getHours();
    // var minute=now.getMinutes();
    // var second=now.getSeconds();
    return year + '.' + month + '.' + date
    // +" "+hour+":"+minute+":"+second;
  }

  return (
    <div className="record_wrap">
      <NavBar title="七夕兑换记录" />
      <div className="content">
        {dataList.map((item) => (
          <div className="item" key={item.id}>
            {/* <img src={item?.img} alt="" /> */}
            <div className="info">
              <div className="name">{item.goods_name}</div>
              <div className="price">
                <span>{item.debris_num}</span>
                <div className="icon"></div>
              </div>
            </div>
            <div className="time">兑换时间：{TimeDate(new Date(+item.create_time * 1000))}</div>
          </div>
        ))}
        <InfiniteScroll loadMore={getList} hasMore={hasMore} threshold={150} />
      </div>
    </div>
  )
}
